<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            background-color: red;
            width: 500px;
            height: 300px;
            /*水平居中 */
           text-align: center;
            margin: auto;
            /*position: relative;*/

        }
        .box1{
            background-color: greenyellow;
            width: 200px;
            height: 100px;
            /*水平居中 */
            /*margin: 0 auto;*/
            /*垂直居中*/
           /* position: absolute;
            left: 50%;
            top: 50%;
            margin-top:-100px ;
            margin-left: -50px;*/


        }
    </style>
</head>
<body>
<div id="box">
    <div class="box1">块级元素 </div><!--块级标签水平居中   margin: 0 auto;-->
    <span >我是行内标签</span><!--行内标签水平居中-- text-align: center;-->
    <button>我是行内块级标签</button>
</div>

</body>
</html>